<template>
  <div class="ckplayer-wrap">
    <div :id="'xgVideoMp' + videoId"
         class="video"
         :style="{ height: height, width: width }"></div>
  </div>
</template>

<script setup>
import {
  defineProps,
  ref,
  // defineEmits,
  onMounted,
  onUnmounted,
  watch
} from 'vue'
import Player from 'xgplayer'

const props = defineProps({
  videoId: {
    type: Number,
    default: 0
  },
  videoPath: {
    type: String,
    require: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  autoplay: {
    type: Boolean,
    default: true
  }
})

const player = ref(null)
const playerConfig = ref({
  id: 'xgVideoMp' + props.videoId,
  url: props.videoPath,
  width: props.width,
  height: props.height,
  autoplay: props.autoplay,
  cors: true,
  loop: true
  // aspectRatio: '16:9',
  // playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
})
const destroy = () => {
  if (player.value && typeof player.value.destroy === 'function') {
    player.value.destroy()
  }
}
// const emits = defineEmits(['player'])
const initPlayer = () => {
  destroy()
  player.value = new Player(playerConfig.value)
}
onMounted(() => {
  initPlayer()
})

onUnmounted(() => {
  destroy()
})

watch(
  () => props.videoPath,
  () => {
    player.value.pause()
    playerConfig.value.url = props.videoPath
    player.value.src = props.videoPath
    // player.value.reload()
  }
)
</script>

<style lang="scss" scoped>
// #xgVideoMp {
//   flex: auto;
// }
.ckplayer-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  // padding-bottom: 56.25%;
  .video {
    position: absolute !important;
    width: 100%;
    height: 100%;
    background: transparent !important;
  }
}
</style>
